import styled from "styled-components";

function r(px) {
  let baseSize = 75 / 2;
  return (px / baseSize).toFixed(2) + "rem";
}
export const Showone = styled.div`
background-color: blue;
img{
  width:${r(109)};
  height:${r(150)};
  margin-left:${r(10)}
}

h2{
  width:100%;
  height:${r(45)};
  font-size:${r(16)};
  line-height:${r(45)};
  font-weight:700;
  text-align:center;
  color:#fff;
  span{
    width:${r(18)};
    height:${r(18)};
    font-size:${r(18)};
    line-height:${r(18)};
   position:absolute;
   left:${r(10)};
   top:${r(10)};
  }
}
.wen{
  display:inline-block;
  width:${r(225)};
  height:${r(40)};
  position:absolute;
  right:${r(12)};
  top:${r(58)};
  font-size:${r(17)};
  font-weight:500;
  color:#fff;
  }
  .jia{
    display:inline-block;
    width:${r(91)};
    height:${r(20)};
    margin: 0 ${r(12)} ${r(12)} ${r(12)};
    font-size:${r(16)};
    color:#fff;
}
`;
export const Showtwo = styled.div`

.kefu{
  display:inline-block;
  position:fixed;
  bottom:0;
  left:0;
  z-index:10000;
  background:blue;
  width:100%;
  height:${r(45)};
  .ke{
    display:inline-block;
    width:${r(30)};
    height:${r(30)};
    font-size:${r(8)};
    position:absolute;
    left:0;
    text-align:center;
    line-height:${r(40)}
    
  }
  .buy{
    display:inline-block;
    width:${r(310)};
    height:${r(45)};
    font-size:${r(16)};
    text-align:center;
    position:absolute;
    right:${r(10)};
    line-height:${r(40)};
    border-radius:${r(15)} ${r(15)} ${r(15)} ${r(15)};
    background:orange;
  }
}
`;
export const Showthree = styled.div`
  .wan{
    font-size: ${r(20)};
    font-weight: 900;
  }
  img{
    width:${r(345)};
    height:${r(212)};
  }
  .abc{
    font-size:${r(15)};
  }
`;
